<template>
    <view class="cart-item">
        <uni-swipe-action>
            <uni-swipe-action-item>
                <cart-item-product
                    :isShowCheckBox="isShowCheckBox"
                    :selectData="selectData"
                    :productInfo="productInfo"
                    :specshow="specshow"
                    @changeCheck="changeCheck"
                    @specfn="specfn"></cart-item-product>
                <cart-item-specs
                    :isShowCheckBox="isShowCheckBox"
                    v-if="specshow"
                    :selectData="selectData"
                    v-for="(item, index) in productInfo.SubItems"
                    :isLast="index == productInfo.SubItems.length - 1"
                    :key="item.ID"
                    :productInfo="item"
                    @upNum="upNum"
                    @checkboxChange="checkboxChange"></cart-item-specs>
                <template v-slot:right>
                    <view class="slot-button" @click="delTip()">
                        <text class="slot-button-text" @click.stop="delTip()">删除</text>
                    </view>
                </template>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </view>
</template>

<script>
import cartItemProduct from "@/pages_scan/components/cart/cart-item-product.vue"
import cartItemSpecs from "@/pages_scan/components/cart/cart-item-specs.vue"
export default {
    components: {
        cartItemProduct,
        cartItemSpecs,
    },
    props: {
        productInfo: {
            type: Object,
            default: {},
        },
        selectData: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            specshow: true,
        }
    },
    methods: {
        upNum(e) {
            this.$emit("upNum", this.productInfo)
        },
        changeCheck(e) {
            this.$emit("changeCheck", e)
        },
        specfn(e) {
            this.specshow = e
        },
        checkboxChange(e, id) {
            this.$emit("checkboxChange", e, id)
        },
        delTip() {
            this.$emit("delTip", this.productInfo.SubItems[0])
        },
    },
}
</script>

<style lang="scss" scoped>
.cart-item {
    background: $color-white;
    padding: 11rpx $app-page-padding;
    border-radius: $border-radius-10;
}
.slot-button {
    display: flex;
    flex-direction: row;
    background: #f0201f;
    width: 100rpx;
    border-radius: 0 12rpx 12rpx 0;
    border-left: 1rpx solid $color-white;

    .left-border {
        display: flex;
        height: 100%;
        width: 20rpx;
        background: $color-white;
        border-radius: 0 12rpx 12rpx 0;
        border-left: 1rpx solid $color-white;
        margin-left: -1rpx;
    }

    .slot-button-text {
        display: flex;
        height: 100%;
        background: #f0201f;
        color: $color-white;
        border-radius: 0 12rpx 12rpx 0;
        width: 12rpx;
        align-items: center;
        margin-left: 38rpx;
    }
}
</style>
